<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#comment .loginbox{
				position: fixed;  /*相对浏览器窗口定位*/
				z-index: 99999; /* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.85);
			}
			#comment .icon-style{
				margin-right: 5px;
				color: #999999;
			}
			
			#comment .loginbox .box{
				width: 300px;
				height: 300px;
				padding: 40px 20px 20px 20px;
				margin: 100px auto;
				background: #FFFFFF;
			}
			
			#comment .loginbox .box h3{
				font-size: 16px;
				text-align: center;
				font-family: "微软雅黑",serif;
			}
			
			#comment .loginbox .box input{
				width: 100%;
				height: 40px;
				border: 1px solid red;
				margin: 10px 0;
				border-radius: 2px;
			}
			
			#comment .loginbox .box input[type ='button']{
				background: red;
				color: #fff;
				font-family: "微软雅黑",serif;
			}
			
			body #comment .loginbox .box .blueBtn{
				background: #0089FF;
				border: 1px solid #0089FF; 
			}
			
			#comment .userbar{
				height: 200px;
				padding: 10px;
				text-align: center;
			}
			
			#comment .userbar .userimg{
				height: 100px;
				width: 100px;
				border-radius: 50%;
			}
			#comment .userbar .username{
				display: block;
				padding: 10px 0;
				font-size: 18px;
				color: red;
				font-weight: bolder;
			}
			#comment .commentbox{
				position: relative;
				top: 40;
				width: 600px;
				padding: 20px 20px 30px 20px;
				background: #eee;
				margin: 0 auto;
			}
			#comment .commentbox .loginout{
				display: block;
				text-decoration: underline;
				color: blue;
				cursor: pointer;
			}
			#comment .commentbox .userword{
				outline: none;
			}
			#comment .commentlist{
				padding: 10px;
			}
			#comment .commentlist dl{
				padding: 20px 0;
				border-bottom: 1px solid #d2d2d2;
			}
			#comment .commentlist dl dt{
				float: left;
				text-align: center;
				margin-right: 15px;
			}
			#comment .commentlist dl dt img{
				height: 50px;
				width: 50px;
				border-radius: 25%;
			}
			#comment .commentlist dl  dd{
				padding-bottom: 10px;
			}
			#comment .commentlist .btbar span{
				margin-right: 15px;
				font-size: 10px;
			}
			#comment .commentlist .btbar .red strong{
				color: red;
				margin: 0 3px;
				font-weight: normal;
				cursor: pointer;
			}
			
			#comment .commentlist .username{
				display: block;
				font-size: 12px;
				text-align: center;
			}
			
			#comment .commentlist .wordsbox textarea{
				height: 100px;
				width: 100%;
				margin-top: 20px;
				margin-bottom: 10px;
				resize: none;
			}
			#comment .commentlist .wordsbox span{
				font-size: 13px;
				margin-right: 15px;
				text-decoration: underline;
				color: blue;
				cursor: pointer;
			}
			#comment .commentlist .wordsbox input{
				float: left;
				width: 80px;
				height: 28px;
				text-align: center;
				color: #FFFFFF;
				background-color: red;
				border: none;
				border-radius: 3px;
			}
		</style>
	</head>
	<body>
		<div id="comment">
			
			<!-- 登录 -->
			<div class="loginbox " v-show="loginStatus" @click="loginboxClick()" style="display: none;">
				<div class="box" @click="stopProp()">
					<h3>用户登录</h3>
					<form name = "login" id = "login">
						<input type="text" class="username" placeholder="请输入姓名" />
						<input type="password" class="psw" placeholder="请输入密码" />
						<input type="button"  value="立即登录" @click="login()"/>
						<input type="button"  value="立即注册" @click="showregister()" class="blueBtn" />
					</form>
				</div>
			</div>
			
			<!-- 注册 -->
			<div class="loginbox registerbox" v-show="registerStatus" @click="registerboxClick()" style="display: none;">
				<div class="box" @click="stopProp()">
					<h3>用户注册</h3>
					<form name = "register" id = "register">
						<input type="text" class="username" placeholder="请输入姓名" />
						<input type="password" class="psw" placeholder="请输入密码" />
						<input type="button"  value="立即注册" @click="register()"/>
						<input type="button"  value="立即登录" @click="showlogin()" class="blueBtn" />
					</form>
				</div>
			</div>
			
			<!-- 评论 -->
			<div class ="commentbox">
				<div class="userbar" v-show="userbarStatus">
					<img : src = "../学习JS/坦克大战飞机/img/dj10.png"  class="userimg">
					<span class="loginout" @click="loginout()">退出账号&nbsp;&nbsp;<i class="icon-style icon-signout"></i></span>
					<span class="username" v-text="currentUser.username"><i class="icon-style icon-user-md">&nbsp;</i></span>
				</div>
			
			
			<div id="commentlist">
				<dl v-for="(value ,index) in comments">
					<dt>
						<img : src="../学习JS/坦克大战飞机/img/dj10.png" >
						<span class="username">{{value.username}}</span>
					</dt>
					<dd class="commentwords"><i class="icon-style icon-file-alt"></i>{{value.words}}</dd>
					<dd class="btbar">
						<span class="data red"><i class="icon-style icon-calendar"></i>时间<strong>{{value.time}}</strong></span>
					</dd>
				</dl>
				
				<div class="wordsbox">
					<textarea placeholder="请输入留言" ></textarea>
					<span @click="showlogin()" v-show="lrBtnStatus">登录</span>
					<span @click="showregist()" v-show="lrBtnStatus">注册</span>
					<input type="button" value="提交" @click="subCommont"/>
				</div>
			</div>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		/* Date.prototype.format = function(fmt){
			var o = {
				'M+':this.getMonth()+1,
				'd+':this.getDate(),
				'h+':this.getHours(),
				'm+':this.getMinutes(),
				's+':this.getSeconds(),
				'q+':Math.floor((this.getMonth()+3)/3),
				's':this.getMilliseconds()
			};
			
			if(/(y+)/.test(fmt)){
				fmt = fmt.replace(RegExp.$1,(this.getFullYear()+'').substr(4-RegExp.$1.length))
			}
			for(var k in o){
				if(new RegExp("("+k+")").test(fmt)){
					fmt=fmt.replace(RegExp.$1,(RegExp.$1.length==1)?(o[k]) : ("00"+o[k]).substr((""+o[k].length)));
				}
			}
			return fmt;
		} */
		 
		
		var v = new Vue({
			el:"#comment",
			data:{
				comments:[{
					username:"张三",
					userimg: "../学习JS/坦克大战飞机/img/dj10.png",
					words:"这里是不错",
					time:"2017-02-17 09:15:25"
				},{
					username:"张三",
					userimg: "../学习JS/坦克大战飞机/img/dj10.png",
					words:"这里是不错",
					time:"2017-02-17 09:15:25"
				},{
					username:"张三",
					userimg: "../学习JS/坦克大战飞机/img/dj10.png",
					words:"这里是不错",
					time:"2017-02-17 09:15:25"
				}],
				users:[{
					username:"zhangsan",
					password:"123456",
					userimg:"../学习JS/坦克大战飞机/img/dj10.png"
				},{
					username:"zhangsan",
					password:"123456",
					userimg:"../学习JS/坦克大战飞机/img/dj10.png"
				},{
					username:"zhangsan",
					password:"123456",
					userimg:"../学习JS/坦克大战飞机/img/dj10.png"
				}],
				currentUser:{
					username:'',
					userimg:''
				},
				loginStatus :false,
				registerStatus:false,
				userbarStatus:false,
				lrBtnStatus:true
			},
			methods:{
					showlogin:function(){
						document.getElementById("login").reset();
						this.loginStatus=true;
						this.registerStatus=false;
					},
					showregister:function(){
						document.getElementById("register").reset();
						this.loginStatus=false;
						this.registerStatus=true;
					},
					loginout:function(){
						this.currentUser.username="";
						this.currentUser.userimg="";
						alert("退出成功");
						this.userbarStatus=false;
						this.lrBtnStatus=true;
					},
					loginboxClick:function(){
						this.loginStatus=false;
					},
					registerboxClick:function(){
						this.registerStatus=false;
					},
					stopProp:function(e){
						e = e||event;
						e.stopPropagation();
					},
				}
		})
	</script>
</html>
